<template>
        <div class="liveWrap">
                <el-form :inline="true" :model="params" class="demo-form-inline">
                        <el-form-item label="当前状态：">
                                <el-select v-model="params.status">
                                        <el-option v-for="item in statuss"
                                        :key="item.label"
                                        :label="item.label"
                                        :value="item.value"
                                        >

                                        </el-option>
                                </el-select>
                        </el-form-item>
                        <el-form-item label="课程名称：">
                                <el-input v-model="params.name" placeholder="请输入课程名称"></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间：">
                                <el-date-picker
                                        v-model="time"
                                        type="datetimerange"
                                        align="right"
                                        unlink-panels
                                        range-separator="至"
                                        start-placeholder="开始日期"
                                        end-placeholder="结束日期"
                                        :picker-options="pickerOptions">
                                </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="query" id="monitorEnter">查询</el-button>
                            <el-button type="primary" @click="add">添加直播</el-button>
                        </el-form-item>
                </el-form>
                <el-table :data="tableData" v-loading="loading" border stripe>
                        <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
                        <!-- <el-table-column prop="courseId" label="课程ID"  align="center"></el-table-column> -->
                        <el-table-column prop="name" label="课程名称"  align="center"></el-table-column>
                        <el-table-column prop="time" label="直播时间"  align="center" :formatter="initTime"></el-table-column>
                        <el-table-column prop="status" label="当前状态"  align="center" :formatter="initStatus"></el-table-column>
                        <el-table-column prop="userName" label="创建人"  align="center"></el-table-column>
                        <el-table-column prop="createTime" label="创建时间"  align="center" :formatter="initTime"></el-table-column>
                        <el-table-column  label="操作" align="center">
                                <template slot-scope="scope">
                                        <el-button type="text" size="small" @click="edit(scope.row)"  :disabled="scope.row.status != 0">编辑</el-button>
                                        <el-button type="text" size="small" v-if="scope.row.status==0" @click="pullorpush(scope.row.id,1)">上架</el-button>
                                        <el-button type="text" size="small" v-else @click="pullorpush(scope.row.id,0)">下架</el-button>
                                        <el-button type="text" size="small" @click="del(scope.row.id)" :disabled="scope.row.status != 0">删除</el-button>
                                </template>
                        </el-table-column>
                </el-table>
                <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="params.pageNum"
                            :page-sizes="[10, 20, 40, 50]"
                            :page-size="params.pageSize"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="total" style="margin-top:30px;">
                 </el-pagination>
        </div>
</template>

<script>
import utils from "../../common/utils"
import api from '@/api/apiPath'
export default {
        name:'livemanage',
        title:'直播课程管理',
        data(){
                return {
                        time:"",
                        params:{
                                status:null,
                                name:"",
                                beginTime:"",
                                endTime:"",
                                pageNum:1,
                                pageSize:10
                        },
                        pickerOptions: {
                                shortcuts: [{
                                        text: '最近30天',
                                        onClick(picker) {
                                                const end = new Date();
                                                const start = new Date();
                                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                                picker.$emit('pick', [start, end]);
                                        }
                                }]
                        },
                        statuss:[
                                {value:null,label:"全部"},
                                {value:1,label:"启用"},
                                {value:0,label:"停用"}
                        ],
                        tableData:[],
                        loading:false,
                        total:0
                }
        },
        watch:{
                time(val){
                        if(val){
                                 this.params.beginTime=this.getTimeString(this.time[0]);
                                 this.params.endTime=this.getTimeString(this.time[1])
                        }else{
                                this.params.beginTime=""
                                this.params.endTime=""
                        }
                }
        },
        methods:{
                loadData(){
                        this.axios.post(api.LIVELIST,this.params).then((res)=>{
                                if(res.data.code==200){
                                        this.tableData=res.data.data.list;
                                        this.total=res.data.data.total;
                                }else{
                                        this.$alert(res.data.msg, '提示', {
                                                type: 'error',
                                                confirmButtonText: '确定',
                                        });
                                }
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                initStatus(row, column, cellValue, index){
                        if(cellValue == 1){
	        		return "上架中"
	        	}
	        	if(cellValue == 0){
	        		return "未上架"
	        	}
                },
                initTime(row, column, cellValue, index){
                        return this.getTimeString(cellValue)
                },
                handleSizeChange(val) {
                        this.params.pageSize = val;
                        this.loadData();
                },
                handleCurrentChange(val) {
                        this.params.pageNum = val;
                        this.loadData();
                },
                query(){
                        if( !this.params.status&& this.params.status !="0"){
                                 this.params.status=null
                        }
                        this.loadData();
                },
                add(){
                        this.$router.push({
                                path:"./addlive"
                        })
                },
                edit(val){
                        this.$router.push({
                                path:"./editlive",
                                query:{
                                        id:val.id
                                }
                        })
                },
                pullorpush(id,status){
                        this.$confirm("确定执行此操作吗？","提示",{
                                confirmButtonText:"确定",
                                cancelButtonText:"取消",
                                type:"warning"
                        }).then(()=>{
                                this.axios.post(api.PULLORPUSH,{id:id,status:status}).then((res)=>{
                                        if(res.data.code==200){
                                                this.$alert("操作成功", '提示', {
                                                        type: 'success',
                                                        confirmButtonText: '确定',
                                                        callback: action => {
                                                                if( !this.params.status&& this.params.status !="0"){
                                                                         this.params.status=null
                                                                }
                                                                this.loadData()
                                                         }
                                                });
                                        }
                                })
                        }).catch((error)=>{
                                console.log(error)
                        })
                },
                del(id){
                        this.$confirm("确认删除此课程吗","提示",{
                                confirmButtonText:"确定",
                                cancelButtonText:"取消",
                                type:"warning"
                        }).then(()=>{
                                this.axios.post(api.DELLIVEITEM,{id:id}).then((res)=>{
                                        if(res.data.code==200){
                                                this.$alert("删除成功", '提示', {
                                                        type: 'success',
                                                        confirmButtonText: '确定',
                                                        callback: action => {
                                                             this.loadData()
                                                         }
                                                });
                                        }else{
                                                this.$alert(res.data.msg, '提示', {
                                                        type: 'error',
                                                        confirmButtonText: '确定',
                                                });
                                        }
                                }).catch((error)=>{
                                        console.log(error)
                                })
                        }).catch(()=>{

                        })
                },
                getTimeString (timestamp) {
                  if (timestamp) {
                    const time = new Date(timestamp)
                    let dateStr = ''
                    const year = time.getFullYear()
                    const month = String(time.getMonth() + 1).length === 1 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
                    const day = String(time.getDate()).length === 1 ? '0' + time.getDate() : time.getDate()
                    dateStr = year + '-' + month + '-' + day
                    let timeStr = ''
                    const hours = time.getHours()
                    const hh = String(hours).length === 1 ? '0' + hours : hours
                    const minutes = time.getMinutes()
                    const mm = String(minutes).length === 1 ? '0' + minutes : minutes
                    const seconds = time.getSeconds()
                    const ss = String(seconds).length === 1 ? '0' + seconds : seconds
                    timeStr = `${hh}:${mm}:${ss}`
                    // timeStr = `${hh}:${mm}`
                    return dateStr + ' ' + timeStr
                    // return dateStr
                  } else {
                    return ''
                  }
              },
      },
      mounted(){
              this.loadData();
      },
      activated(){
        this.loadData();
      }
}
</script>

<style lang="stylus">

    .liveWrap{
            .el-table .cell{
                    white-space:nowrap !important;
            }
    }

</style>
